<template>
  <div class="home-head">
    <!-- 地点 -->
    <div class="city" @click="gotoCity">
      <van-icon
        class="duo-left"
        :name="iconName"
        :value="iconName"
        size="0.5rem"
      />
    </div>

    <!-- 搜索框 -->
    <div class="search" @click="gotoSearchOne" >
      <SearchInput  />
    </div>

    <!-- 聊天框 -->
    <div class="chat" @click="gotoChat">
      <van-icon name="comment - o" size="0.5rem" />
    </div>
  </div>
</template>

<script>
import SearchInput from "../../../components/searchInput/SearchInput";

export default {
  name: "HeadNav",

  components: {
    SearchInput,
  },
  methods: {
    gotoCity() {
      var letf = document.getElementsByClassName("duo-left")[0];
      // this.$router.push("/city");
      // console.log(letf.getAttribute("value"));
      if (letf.getAttribute("value") === "location-o") {
        this.$router.push("/city");
      } else {
        this.$router.go(-1);
      }
    },
    gotoChat() {
      console.log(2);
      this.$router.push("/mynews");
    },
    gotoSearchOne(){
       console.log(2);  
        this.$router.push("/searchPage");
    }
  },
  props: ["iconName"],
};
</script>

<style scoped>
.home-head {
  width: 100%;
  height: 1.4rem;
  display: flex;
  color: #fff;
  background-color: #ff5555;
  line-height: 1.4rem;
  font-size: 0.4rem;
}
.city {
  width: 0.7rem;
  margin-top: 0.15rem;
}
.search {
  flex: 1;
  height: 0.8rem;
  color: #ccc;
  margin: 0.3rem 0.15rem 0 0.1rem;
  line-height: 0.8rem;
  text-align: left;
}
.chat {
  width: 0.4rem;
  text-align: center;
  margin-top: 0.15rem;
  margin-right: 0.2rem;
}
</style>